import React, { FC } from 'react'
import { Avatar, IconToggle } from '@/pages/manager/components'
import { ItemLabelWrap } from './style'
import { fetchToggleTree } from '@/pages/manager/store.fetch'
import { ItemData } from './useGetList'

export const ListItem: FC<
	ItemData & {
		isCascade: boolean
		tab: string
		openMap: { [mtKey: string]: boolean }
		setOpenMap: (val: { [mtKey: string]: boolean }) => void
	}
> = (props) => {
	const { mcc, openMap, tab, nestingLevel, isCascade, setOpenMap } = props
	const isOpen = openMap[mcc.mtKey]
	const handleOpenTree = () => {
		if (!mcc.isMt) {
			openMap[mcc.mtKey] = !openMap[mcc.mtKey]
			setOpenMap(openMap)
			fetchToggleTree({
				mcc,
				mtKey: mcc.mtKey,
				status: {
					isOpen: openMap[mcc.mtKey],
				},
			})
		}
	}
	const handleClick = (e: React.MouseEvent) => {}
	return (
		<ItemLabelWrap
			isCascade={isCascade}
			nestingLevel={nestingLevel}
			isOnline={mcc.status.isOnline}
			isVip={mcc.isMt && mcc.status.isVip}
			isSelected={false}
			isMeeting={!mcc.isMt}
			isAll={tab === 'all'}
			onClick={handleClick}
		>
			{!mcc.isMt && mcc.status.isOnline && (
				<IconToggle open={!!isOpen} className="icon-toggle" onClick={handleOpenTree} />
			)}
			<div className="avatar">
				<Avatar value={mcc} />
			</div>
			<div className="name" title={mcc.name}>
				<pre data-mtid={mcc.mtKey}>{mcc.name}</pre>
			</div>
		</ItemLabelWrap>
	)
}
